import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Global } from 'src/app/core/global';
import { Router } from '@angular/router';
import { ApiService } from './../../core/api/api.service';
import { StorageService } from 'src/app/core/sotrage/storage.service';
import { ToptipsService } from 'ngx-weui';

@Component({
	selector: 'login-dialog',
	template: `
	<div class="fixed-box" [ngClass]="{'fixed-hide':!showdialog}">
		<div class="fixed-box-bg" (click)="closeFixed($event)"></div>
		<div class="fixed-box-body login-dialog" [ngClass]="{'fixed-body-show':showdialog}">
			<h3>{{'login'|translate}}</h3>
			<div class="login-cell">
				<input type="text" autocomplete="off" placeholder="{{ 'loginPage.input-userId' | translate }}" [(ngModel)]="data.id" name="id" minlength="4" maxlength="32" />
			</div>
			<div class="login-cell">
				<input type="password" autocomplete="new-password" placeholder="{{ 'loginPage.input-password' | translate }}" [(ngModel)]="data.loginPw" name="loginPw" />
				<span class="error" style="color: red; font-size: 1.5rem;" *ngIf='pwError' >
                    {{'loginPage.html1' | translate}} 
                    {{jhNum}}
                    {{'loginPage.html2' | translate}} 
                </span>
			</div>
			<a class="login-btn" (click)="toLogin()">{{ 'login' | translate }}</a>
			<p><a (click)="goRegister()">{{'loginPage.toreg' | translate}}</a></p>
		</div>
	</div>
	`,
	styles: [
		`
			.login-dialog h3{margin-bottom:2rem;text-align:center; font-size:2.6rem;color:#FCCC5B;font-weight:normal;}
			.login-dialog input{
				width:100%;
				background:#6C6F72;
				font-size:1.5rem;
				line-height:2rem;
				padding:1.8rem;
				border-radius:3rem;
				border:none;
				margin-bottom:1rem;
				color:#fff;
			}
			.login-dialog input::-webkit-input-placeholder {
				color: #CCCCCC;
			}
			.login-dialog input::-moz-placeholder {
				color: #CCCCCC;
			}
			.login-dialog input:-moz-placeholder {
				color: #CCCCCC;
			}
			.login-dialog input:-ms-input-placeholder {
				color: #CCCCCC;
			}
			.login-dialog .login-cell{
				position:relative;
			}
			.login-dialog .login-cell .imgCode{
				position:absolute;
				right:2rem;
				top:1rem;
				height:3.6rem;
			}
			.login-dialog .login-cell .error{
				position:absolute;
				right:2rem;
				top:1rem;
				height:3.6rem;
				line-height:3.6rem;
			}
			.login-dialog .login-btn{
				display:block;
				width:100%;
				height:4.5rem;
				line-height:4.5rem;
				font-size:2rem;
				color:#333;
				text-align:center;
				background: #FCCC5B;
				border:none;
				border-radius:2.3rem;
				margin-top:2rem;
			}
			.login-dialog .login-btn:active{
				background:#daaa39;
			}
			.login-dialog p{
				margin-top:0.6rem;
				line-height:3rem;
				text-align:center;
				font-size:1.6rem;
				width:100%;
				text-align:center;
			}
			.login-dialog p a{
				color:#AEB1B5;
			}
			.login-cell
		`,
	],
})
export class LoginDialogComponent implements OnInit {
	@Input()
	showdialog = false;
	@Output() showdialogChange = new EventEmitter();
	@Output() loginSuccess = new EventEmitter<Element>();
	data: any = {};
	e =  Math.random()*10000;
	imageVerifyCodeId: any;
	imgUrl;
	pwError = false;
	jhNum;
	constructor(private global:Global,private router:Router,private apiService: ApiService, private sto: StorageService, private srv: ToptipsService) {
	}
	ngOnInit() {
	}
	closeFixed(e) {
		e.preventDefault();
		this.showdialog = false;
		this.showdialogChange.emit(this.showdialog);
	}
	onChangImgCode() {
		this.e = Math.random()*10000;
		this.imgUrl = '/api/generateImageVerifyCode.do?imageVerifyCodeId=' + this.imageVerifyCodeId + '&k=' + this.e;
	}
	
	goRegister(){
		sessionStorage.setItem('returnurl', this.router.url);
		this.router.navigateByUrl('/register');
	}
	toLogin(){
		
		this.apiService.post('登录', this.data).then(res => {
			this.sto.set('user', res['data']);
			this.srv.success('登录成功！');
			this.showdialog = false;
			this.showdialogChange.emit(this.showdialog);
			this.loginSuccess.emit();
		}).catch(res => {
			if (res['data']['loginErrorNum'] < 3) {
				this.srv.warn(res['message']);
			} else {
				this.pwError = true;
				this.jhNum = 5 - res['data']['loginErrorNum'];
				if (this.jhNum == 0) {
					this.pwError = false;
				}
			}
		});
	}
}
